<template>
  <div class="examineHistory">
    <el-dialog title="审核历史" :visible.sync="showDialog" width="70%">
      <div class="tableBox">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="changeApplyDate" label="申请时间" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="changeUser" label="申请人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="changeReason" label="申请原因" width="150"></el-table-column>
          <el-table-column
            prop="eventCharacterBeforeLabel"
            label="原内容"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="eventCharacterAfterLabel"
            label="新内容"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="approvalUser" label="审核人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalDate" label="审核时间" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalResult" label="审核结果" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalNote" label="审核意见" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getHistoryList } from '@/api/itemManage';
  export default {
    props: {
      selectItem: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      selectItem: function (newVal) {
        this.choiceItem = newVal;
      }
    },
    data() {
      return {
        choiceItem: {},
        showDialog: false,
        tableData: [],
        current: 1, //当前页
        size: 5, //每页的数量
        total: 0
      };
    },
    methods: {
      handleSizeChange(val) {
        this.current = 1;
        this.size = val;
        this.initPage();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.initPage();
      },
      initPage() {
        getHistoryList({
          ecId: this.choiceItem.ecId,
          pageNum: this.current,
          pageSize: this.size
        }).then((res) => {
          console.log(res);
          if (res.data.result) {
            this.tableData = res.data.result.records;
            this.total = res.data.result.total;
          }
        });
      }
    },
    mounted() {}
  };
</script>

<style lang="scss">
  .examineHistory {
    .fenye {
      margin: 20px 0;
      text-align: right;
    }
    h2 {
      font-weight: bold;
      padding-left: 10px;
      display: flex;
      align-items: center;
      margin: 10px 0;
      span {
        margin-left: 10px;
      }
    }
    .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    .el-form-item__content {
      display: flex;
    }

    .deleteItem {
      color: #f00;
    }
  }
</style>
